<template>
  <div class="app-container">
    <el-form
      ref="listFilterRef"
      :model="list.filter"
      inline
      class="list-filter"
    >
      <el-form-item prop="keyword">
        <el-input v-model="list.filter.keyword" placeholder="输入标签名称搜索" clearable>
          <i slot="prefix" class="el-input__icon el-icon-search" />
        </el-input>
      </el-form-item>

      <el-form-item prop="type">
        <el-select v-model="list.filter.type" placeholder="标签类型" clearable>
          <el-option v-for="(o, i) in typeCollector.label" :key="i" :label="o.label" :value="o.value"></el-option>
        </el-select>
      </el-form-item>

      <el-form-item prop="sex">
        <el-select v-model="list.filter.sex" placeholder="选择性别" clearable>
          <el-option v-for="(o, i) in typeCollector.gender" :key="i" :label="o.label" :value="o.value"></el-option>
        </el-select>
      </el-form-item>

      <el-form-item prop="vipLevel">
        <el-select v-model="list.filter.vipLevel" placeholder="选择会员等级" clearable>
          <el-option v-for="(o, i) in typeCollector.level" :key="i" :label="o.label" :value="o.value"></el-option>
        </el-select>
      </el-form-item>

      <el-form-item prop="age">
        <el-select v-model="list.filter.age" placeholder="选择年龄" clearable>
          <el-option v-for="(o, i) in typeCollector.age" :key="i" :label="o.label" :value="o.value"></el-option>
        </el-select>
      </el-form-item>
      <el-button @click="reset">重置</el-button>
    </el-form>

    <div class="table-operation">
      <span>
        <auth-button @click="c()" name="新增" />
        <!-- <ExportExcel
          url="sot-admin-api/vip/vip-tag/export"
          :param="list.filter"
        /> -->
      </span>
      <el-pagination
        v-bind="elPaginationProps"
        :total="list.total"
        :currentPage.sync="list.filter.pageNo"
        :pageSize.sync="list.filter.pageSize"
      />
    </div>

    <el-table v-loading="list.loading" :data="list.data" v-bind="tableProp">
      <el-table-column align="center" type="index" />
      <el-table-column label="标签名称" prop="name" />
      <el-table-column label="标签类型" prop="type">
        <template slot-scope="{ row }">
          {{ row.type | $value2label(typeCollector.label, 'value/label') }}
        </template>
      </el-table-column>
      <el-table-column label="会员数量" prop="vipCount" />
      <el-table-column label="性别" prop="sex">
        <template slot-scope="{ row }">
          <el-tag :type="formatValue(row.sex,options.sex,'value').type">{{formatValue(row.sex,options.sex,'value').text}}</el-tag>
        </template>
      </el-table-column>
      <el-table-column label="会员等级" prop="vipLevelName" />

      <el-table-column label="年龄范围" prop="age">
        <template slot-scope="{ row }">
          {{ String(row.age) | $value2label(dict.age_distribution) }}
        </template>
      </el-table-column>
      <el-table-column label="消费偏好" prop="consumption" />
      <el-table-column label="交易属性" prop="transaction" />
      <!-- <el-table-column label="充值条件" prop="recharge" /> -->
      <el-table-column label="状态" align="center">
        <template slot-scope="{ row: { id, status } }">
          <KiPopSwitch
            v-bind="popSwitchProps(status)"
            @change="updateStatus({ id, status: status ^ 1 })"
          />
        </template>
      </el-table-column>
      <el-table-column label="创建时间" prop="createTime" />
      <el-table-column label="最后修改时间" prop="updateTime" />
      <el-table-column align="center" label="操作" width="200px">
        <template slot-scope="{ row }">
          <auth-button @click="r(row)" name="查看" />
          <auth-button @click="u(row)" name="编辑" />
          <auth-button @click="d(row)" name="删除" />
        </template>
      </el-table-column>
    </el-table>

    <KiFormDialog
    v-model="form.data"
    :show.sync="form.show"
    :loading="form.loading"
    :readonly="form.status === 'r'"
    :title="formTitle"
    ref="formRef"
    :submit="detailDialogSubmit"
  >
    <template #el-form>
      <el-form-item label="标签名称" prop="name" :verify="{ minLength: 2, maxLength: 6 }">
        <el-input v-model="form.data.name" clearable maxlength="6" show-word-limit />
      </el-form-item>
      <el-form-item label="标签类型" prop="type" verify>
        <el-select v-model="form.data.type" placeholder="">
          <el-option v-for="(o, i) in typeCollector.label" :key="i" :label="o.label" :value="o.value"></el-option>
        </el-select>
      </el-form-item>
      <h3 class="subtitle"><span>条件设置</span></h3>
      <el-form-item label="基本属性">
        <el-form-item prop="sex" style="margin-bottom: 15px">
          <el-row type="flex" align="middle">
            <el-col :span="3">性别：</el-col>
            <el-col :span="21">
              <el-select v-model="form.data.sex" placeholder="" clearable @clear="handleClear('sex')">
                <el-option v-for="(o, i) in typeCollector.gender" :key="i" :label="o.label" :value="o.value"></el-option>
              </el-select>
            </el-col>
          </el-row>
        </el-form-item>
        <el-form-item prop="vipLevel" style="margin-bottom: 15px">
          <el-row type="flex" align="middle">
            <el-col :span="3">会员等级：</el-col>
            <el-col :span="21">
              <el-select v-model="form.data.vipLevel" placeholder="" clearable @clear="handleClear('vipLevel')">
                <el-option v-for="(o, i) in typeCollector.level" :key="i" :label="o.label" :value="o.value"></el-option>
              </el-select>
            </el-col>
          </el-row>
        </el-form-item>
        <el-form-item prop="age" style="margin-bottom: 15px">
          <el-row type="flex" align="middle">
            <el-col :span="3">年龄范围：</el-col>
            <el-col :span="21">
              <el-select v-model="form.data.age" placeholder="" clearable @clear="handleClear('age')">
                <el-option v-for="(o, i) in typeCollector.age" :key="i" :label="o.label" :value="o.value"></el-option>
              </el-select>
            </el-col>
          </el-row>
        </el-form-item>
      </el-form-item>
      <el-form-item label="消费偏好" prop="consumptionType">
        <el-row type="flex" align="middle">
          <el-col :span="1">
            <el-checkbox v-if="form.show" v-model="form.data.consumptionTypeFlag" :true-label="1" :false-label="0" />
          </el-col>
          <el-col :span="3">消费类型</el-col>
          <el-col :span="21">
            <el-form-item v-if="form.data.consumptionTypeFlag" prop="consumptionType" verify>
              <el-select v-model="form.data.consumptionType" placeholder="" clearable>
                <el-option v-for="(o, i) in typeCollector.consumptionType" :key="i" :label="o.label" :value="o.value"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form-item>
      <el-form-item label="交易属性">
        <el-row type="flex" align="middle" style="margin-bottom: 15px">
          <el-col :span="1">
            <el-checkbox v-if="form.show" v-model="form.data.consumptionTimeFlag" :true-label="1" :false-label="0" />
          </el-col>
          <el-col :span="4">最近消费时间</el-col>
          <el-col :span="19">
            <el-form-item v-if="form.data.consumptionTimeFlag" prop="consumptionTime" verify>
              <el-select v-model="form.data.consumptionTime" placeholder="消费时间">
                <el-option v-for="(o, i) in typeCollector.dateRange" :key="i" :label="o.label" :value="o.value"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row type="flex" align="middle" style="margin-bottom: 15px">
          <el-col :span="1">
            <el-checkbox v-if="form.show" v-model="form.data.consumptionRateFlag" class="flex col-center" :true-label="1" :false-label="0" />
          </el-col>
          <el-col :span="4">消费金额</el-col>
          <el-col :span="19">
            <select-range
              :show.sync="form.data.consumptionRateFlag"
              ref="consumptionRateFlagRef"
              :isReadonly="form.status === 'r'"
              :A.sync="form.data.consumptionRateTime"
              :B.sync="form.data.consumptionRateStart"
              :C.sync="form.data.consumptionRateEnd"
              unit="元"
            />
          </el-col>
        </el-row>
        <el-row type="flex" align="middle" style="margin-bottom: 15px">
          <el-col :span="1">
            <el-checkbox v-if="form.show" v-model="form.data.consumptionFrequencyFlag" class="flex col-center" :true-label="1" :false-label="0" />
          </el-col>
          <el-col :span="4">消费频次</el-col>
          <el-col :span="19">
            <select-range
              :show.sync="form.data.consumptionFrequencyFlag"
              :isReadonly="form.status === 'r'"
              ref="consumptionFrequencyFlagRef"
              :A.sync="form.data.consumptionFrequencyTime"
              :B.sync="form.data.consumptionFrequencyStart"
              :C.sync="form.data.consumptionFrequencyEnd"
              unit="次"
            />
          </el-col>
        </el-row>
      </el-form-item>

      <!-- <el-form-item label="充值条件">
        <el-row type="flex" align="middle" style="margin-bottom: 15px">
          <el-col :span="1">
            <el-checkbox v-if="form.show" v-model="form.data.rechargeRateFlag" class="flex col-center" :true-label="1" :false-label="0" />
          </el-col>
          <el-col :span="4">充值金额</el-col>
          <el-col :span="19">
            <select-range
              :show.sync="form.data.rechargeRateFlag"
              :isReadonly="form.status === 'r'"
              ref="rechargeRateFlagRef"
              :A.sync="form.data.rechargeRateTime"
              :B.sync="form.data.rechargeRateStart"
              :C.sync="form.data.rechargeRateEnd"
              unit="元"
            />
          </el-col>
        </el-row>
        <el-row type="flex" align="middle" style="margin-bottom: 15px">
          <el-col :span="1">
            <el-checkbox v-if="form.show" v-model="form.data.rechargeFrequencyFlag" class="flex col-center" :true-label="1" :false-label="0" />
          </el-col>
          <el-col :span="4">充值频次</el-col>
          <el-col :span="19">
            <select-range
              :show.sync="form.data.rechargeFrequencyFlag"
              :isReadonly="form.status === 'r'"
              ref="rechargeFrequencyFlagRef"
              :A.sync="form.data.rechargeFrequencyTime"
              :B.sync="form.data.rechargeFrequencyStart"
              :C.sync="form.data.rechargeFrequencyEnd"
              unit="次"
            />
          </el-col>
        </el-row>
      </el-form-item> -->

    </template>
  </KiFormDialog>

  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import pageMixin from '@/utils/pageMixin'
import useAdmateAdapter from '@/utils/useAdmateAdapter'
import SelectRange from './components/selectRange'
export default {
  mixins: [pageMixin],
  components: { SelectRange },
  setup: () => useAdmateAdapter({
    urlPrefix: 'sot-admin-api/vip/vip-tag',
  }),
  computed: {
    ...mapGetters([
      'typeCollector'
    ])
  },
  data() {
    return {
      options: {
        sex: [
          { value: 0, text: '未知', type: 'danger'  },
          { value: 1, text: '男' },
          { value: 2, text: '女', type: 'success' }
        ]
      },
    }
  },
  mounted() {
    // 拉取最新会员等级列表
    this.$store.dispatch('dataset/getAllType')
  },
  methods: {
    // 转换sex数据
    formatValue(value,list,keyVal="value"){
      value = value==null ? 0 : value // 对null数据特殊处理
      return list.filter(item=>{
        return item[keyVal] == value
      })[0]
    },
    handleClear(f) { // f形成可能涵盖字段：sex  vipLevel  age
      // 置空接口只接受null
      this.form.data[f] = null
    },
    async detailDialogSubmit () {
      // 校验子组件
      let getChildValid = true
      let arr = ['consumptionRateFlag', 'consumptionFrequencyFlag', 'rechargeFrequencyFlag', 'rechargeRateFlag']
      await arr.map((_) => {
        if (this.form.data[_]) {
          this.$refs[_ + 'Ref'].doHandleRow__().then((valid) => {
            if (!valid) {
              getChildValid = valid
            }
          })
        }
      })
      if (getChildValid) {
        return this.submitForm()
      } else {
        return {
          close: false
        }
      }
    },
  }
}
</script>

<style lang="scss" scoped></style>
